<template>
	<view>
		<view class="body" style=" max-width:640px; overflow:auto; overflow-x:hidden">
			<dfHeader></dfHeader>
			<div class='content1 grey'>
				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1">视频</div>
					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>
				<section class="index_st12 clearfix video_list ">

					<ul>
						<li v-for="(data,i) in dataList" class='video' @tap="play(i)">
							<div class='video_box'>
								<video :id="'v'+i" controls="controls" :show-center-play-btn='false' :show-play-btn="false" :src="config.staticUrl+data.video"
								 :poster="data.pic!=''?data.pic:config.no_pic" controlsList="nodownload"></video>
								</video>
								<div class='video_play_box'>
									<div class='icon'>
										<div class='play'></div>
									</div>
								</div>
								<div class='video_pause_box'>
									<div class='icon'>
										<div class='play'></div>
									</div>
								</div>
							</div>
							<div class='video_info'>
								<h3>{{data.title}}</h3>
								<p>{{data.subs}}</p>
							</div>
						</li>

					</ul>

					<div class="yema">
						<div class="qian" @tap='prev()' v-if="show_prev">上一页</div>
						<div class="qian act" v-else="show_prev">上一页</div>
						<block v-for="x in pages">
							<div class="qian pageN" style="color:red" v-if="x==pageIndex+1"  @tap="jump(x)">{{x}}</div>
							<div class="qian pageN" v-else  @tap="jump(x)">{{x}}</div>
						</block>
						<div class="next" @tap='next()' v-if="show_next">下一页</div>
						<div class="next act" v-else="show_next">下一页</div>
					</div>
				</section>
				<dfFooter></dfFooter>
			</div>
		</view>
	</view>
</template>
<script>
	import $ from "@/static/js/jquery-2.1.1.min.js";
	export default {
		components: {},
		data() {
			return {
				dataList: [],
				pageIndex: 0,
				show_prev: false,
				show_next: true,
				loading: true,
				// 当前菜单index
				tabIndex: 0,
				// 当前菜单id
				tabId: "shipin",
				order: "time",
				config: this.$config,
				item: [],
				pages: [1, 2, 3],
				next_pageN: 0,
				turn_page: true
			}
		},
		onLoad() {
			this.getList();
			this.$functions.setPageData(this.tabId);
		},
		methods: {
			play(i) {
				// console.log(i);
				console.log(this.item)
				var video = document.querySelectorAll('video');
				// console.log(video)
				if (this.item[i]) {
					console.log('pause');
					$('#v' + i).next().next().show();
					video[i].pause() //让当zhuan前点击shu的video播放					
					this.item[i] = false;
				} else {
					console.log('play');
					this.allStop();
					video[i].play(); //让当zhuan前点击shu的video播放
					this.item[i] = true;
					$('#v' + i).next().hide();
					$('#v' + i).next().next().hide();
				}
			},
			allStop() {
				var video = document.querySelectorAll('video');
				for (let v = 0; v < video.length; v++) {
					video[v].pause() //让上一个video暂停zhi
					this.item[v] = false;
					$('#v' + v).next().show();
					$('#v' + v).next().next().hide();
				}
			},
			jump(n) {
				this.pageIndex = n - 1;
				this.reload = true;
				this.turn_page = false;
				// console.log(n, this.pageIndex);
				this.getList()
			},
			prev() {
				var newP = [];
				var startP = this.pages[0] - 3;
				for (var i = 0; i < 3; i++) {
					newP.push(startP + i);
				}
				this.pages = newP;
				this.pageIndex = this.pages[0] - 1;
				if (this.pageIndex <= 1) {
					this.show_prev = false;
				}
				this.reload = true;
				this.show_next = true;
				this.turn_page = true;
				this.getList();
			},
			next() {
				var newP = [];
				var startP = this.pages.pop() + 1;
				for (var i = 0; i < this.next_pageN; i++) {
					newP.push(startP + i);
				}
				this.pages = newP;
				this.pageIndex = this.pages[0] - 1;
				this.reload = true;
				this.show_prev = true;
				this.turn_page = true;
				this.getList();
			},
			// 获取数据列表
			getList() {
				this.allStop();
				// 获取某个菜单下的数据				
				let _this = this;
				var para = {
					pageSize: 6,
					pageIndex: this.pageIndex,
					typeId: this.tabId,
					order: this.order
				};
				this.$request.api_request('', para).then(function(data) {
					let list = _this.setData(data.result.data);
					if (_this.turn_page) {
						_this.next_pageN = data.result.next_page;
						if (_this.next_pageN == 0) {
							_this.show_next = false;
						}
					}
					//首次加载直接赋值，之后追加
					_this.dataList = _this.reload ? list : _this.dataList.concat(list);
					_this.reload = false;
					// 取消刷新图标
					uni.stopPullDownRefresh();

					_this.loading = false

					// console.log(list.length,para.pageSize)
					if (list.length < para.pageSize) {
						_this.show_next = false;
					}

				})
			},
			setData: function(items) {
				return this.$functions.setData(items, true);
			},
			goDetail: function(e) {
				this.$functions.goDetail(e, this)
			},
		},
		watch: {}
	}
</script>
<style lang="scss">
	@import '@/static/css/online/index.scss';
</style>
